import React from 'react'

import "./App.css"

class Parent extends React.Component {
  state = {
    hasError: ""
  }

  // 只适用于build后的环境
  static getDerivedStateFromError(error){
    console.log(error);
    return {hasError: error}
  }

  // 一般用于统计错误次数并发送到后台
  componentDidCatch(){
    console.log("渲染组件时出错");
  }

  render() {
    return (
      <div>
        {this.state.hasError?<h3>Network Error</h3>:<A />}
      </div>
    )
  }
}

function A(props) {
  return (
    <div className="A">
      <p>A</p>
      {props.username.first}
    </div>
  )
}

function B(props) {
  return (
    <div className="B">
      <p>B</p>
    </div>
  )
}



function App() {
  return (
    <Parent />
  );
}

export default App;
